<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <jsp:include page="/abstract/base-head.jsp"></jsp:include>
    <script type="text/javascript">
        $(function () {
            /** called when a single item is deleted  */
            $(".del").click(function () {
                var firTd = $(this).parent().parent().children(`:first`);
                return confirm("您确定要删除 [" + firTd.text() + "] 吗?" );
            });
            /** click clear button use  */
            $("#clear").click(function () {
                var firTd = $(this).parent().parent().children(`:first`);
                return confirm("您确定要清空购物车吗?" );
            });
            /** count change call this */
            $(".count").change(function () {
                var updateId = $(this).attr("updateId");
                var firInput = $(this).parent().parent().children(`:eq(1)`);
                /*window.location.href = "cart?method=update&book_id=" + firInput.val() + "&count=" + $(this).val();*/
                $.getJSON("cart?method=updateAjax&book_id=" + firInput.val() + "&count=" + $(this).val(),function (data) {
                    $(".b_count").text(data.totalCount);
                    $(".b_price").text(data.totalAllMoney);
                    $("#book_" + updateId).text(data.itemTotalMoney);
                });
            });
        });
    </script>
</head>
<body>

<div id="header">
    <img class="logo_img" alt="" src="static/img/logo.gif">
    <span class="wel_word">购物车</span>
    <jsp:include page="/abstract/base-info.jsp"></jsp:include>
</div>

<div id="main">

    <c:if test="${empty cart}">
        <h1>购物车内现在空空如也~</h1>
    </c:if>
    <c:if test="${!empty cart}">
        <table>
            <tr>
                <td>商品名称</td>
                <td>数量</td>
                <td>单价</td>
                <td>金额</td>
                <td>操作</td>
            </tr>
                <%--<tr>
                    <td>时间简史</td>
                    <td>2</td>
                    <td>30.00</td>
                    <td>60.00</td>
                    <td><a href="#">删除</a></td>
                </tr>--%>
            <c:forEach items="${cart.items}" var="item" >
                <tr>
                    <td>${item.name}</td>
                    <input type="hidden" name="id" value="${item.id}"/>
                    <td><input updateId="${item.id}" class="count" style="width: 100px" type="text" name="count" value="${item.count}"></td>
                    <td>${item.price}</td>
                    <td id="book_${item.id}">${item.totalMoney}</td>
                    <td><a class="del" href="cart?method=delete&book_id=${item.id}">删除</a></td>
                </tr>
            </c:forEach>
        </table>

        <div class="cart_info">
            <span class="cart_span">购物车中共有<span class="b_count">${cart.totalCount}</span>件商品</span>
            <span class="cart_span">总金额<span class="b_price">${cart.totalAllMoney}</span>元</span>
            <span class="cart_span"><a id="clear" href="cart?method=clear">清空购物车</a></span>
            <span class="cart_span"><a href="user/order?method=checkout">去结账</a></span>
        </div>
    </c:if>

</div>

<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
</div>
</body>
</html>